/*
 * @Author: redman9
 * @Date: 2018-10-22 15:24:35
 * @Last Modified by: Wilbur
 * @Last Modified time: 2018-12-25 10:21:19
 */
<template>
    <div class="container task-review-list-container">
        <div class="operation-wrapper">
            <a
                :href="exportLink"
                target="_blank">
                <el-button
                    type="primary"
                    :disabled="!authResult.auth_export"
                    size="small">Excel导出</el-button>
            </a>
            <template v-if="routeName == 'TaskReviewList'">
                <el-button
                    size="small"
                    :disabled="!authResult.auth_media || !filterData.task_no"
                    @click="handleExportMedia">反馈素材导出</el-button>
                <el-button
                    v-if="routeName == 'TaskReviewList'"
                    size="small"
                    :disabled="!authResult.auth_agent || !filterData.task_no"
                    @click="$router.push({name: 'TaskAgentList', query: { task_no: filterData.task_no }})">代理统计</el-button>
            </template>
        </div>
        <div class="content-wrapper">
            <div
                v-if="routeName == 'TaskReviewList'"
                class="stat-wrapper">
                <div
                    v-if="filterData.task_no && statData.end_time"
                    class="desc">
                    <p class="end-time">截止日期：{{ statData.end_time*1000 | dateFormatter('yyyy-MM-dd HH:mm') }}</p>
                    <div
                        v-if="filterData.task_no && statData.end_time"
                        class="total-switch"
                        @click="showTotalDataFlag = !showTotalDataFlag">
                        <span>查看该任务统计数据</span>
                        <i :class="showTotalDataFlag ? 'el-icon-caret-top': 'el-icon-caret-bottom'"/>
                    </div>
                </div>
                <el-alert
                    v-else
                    class="alert-search-task"
                    title="提示：搜索任务，查看任务统计数据"
                    :closable="false"
                    type="warning" />
                <div
                    v-if="filterData.task_no && statData.end_time"
                    class="stat"
                    v-show="showTotalDataFlag">
                    <div class="stat-item">
                        <p class="title blue">任务要求总数:</p>
                        <p
                            class="num"
                            :class="{ 'empty': statData.all_count === undefined}">
                            {{ statData.all_count !== undefined ? statData.all_count : '— —' }}
                        </p>
                    </div>
                    <div class="stat-item">
                        <p class="title green">审核通过:</p>
                        <p
                            class="num"
                            :class="{ 'empty': statData.complete_done_num === undefined}">
                            {{ statData.complete_done_num !== undefined ? statData.complete_done_num : '— —' }}
                        </p>
                    </div>
                    <div class="stat-item">
                        <p class="title red">审核未通过:</p>
                        <p
                            class="num"
                            :class="{ 'empty': statData.audit_fail_num === undefined}">
                            {{ statData.audit_fail_num !== undefined ? statData.audit_fail_num : '— —' }}
                        </p>
                    </div>
                    <div class="stat-item">
                        <p class="title orange">待提交:</p>
                        <p
                            class="num"
                            :class="{ 'empty': statData.complete_wait_num === undefined}">
                            {{ statData.complete_wait_num !== undefined ? statData.complete_wait_num : '— —' }}
                        </p>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="用户领取任务，但并未提交审核"
                            placement="top">
                            <i class="el-icon-question"/>
                        </el-tooltip>
                    </div>
                    <div class="stat-item">
                        <p class="title red">未领取:</p>
                        <p
                            class="num"
                            :class="{ 'empty': statData.rest_count === undefined}">
                            {{ statData.rest_count !== undefined ? statData.rest_count : '— —' }}
                        </p>
                    </div>
                </div>
            </div>
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small">
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择城市：">
                            <el-select
                                v-model="filterData.city_id"
                                filterable
                                @change="fnCityChange"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in cityList"
                                    :key="item.city_id"
                                    :label="item.name"
                                    :value="item.city_id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        v-if="!onlyOneTask"
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="任务名称：">
                            <el-select
                                v-model="filterData.task_no"
                                filterable
                                @change="handleSelectedTaskChanged"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in tasks"
                                    :key="item.task_no"
                                    :label="item.title"
                                    :value="item.task_no" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="手机号：">
                            <el-input
                                v-model="filterData.phone"
                                placeholder="请输入手机号" />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="用户编号：">
                            <el-input
                                v-model="filterData.user_no"
                                placeholder="请输入用户编号" />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="任务状态：">
                            <el-select
                                v-model="filterData.status"
                                @change="getTableData"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in statusList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="search-btn-wrapper"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-button
                            size="small"
                            type="primary"
                            @click="getTableData">搜索</el-button>
                        <el-button
                            v-if="routeName == 'TaskReviewList' && !onlyOneTask"
                            size="small"
                            type="primary"
                            @click="handleResetFilter">重置</el-button>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;">
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="title"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        width="250"
                        label="任务名称"/>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="nickname"
                        min-width="100"
                        show-overflow-tooltip
                        label="用户昵称" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="user_no"
                        min-width="150"
                        label="用户编号" />

                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="agent_nickname"
                        min-width="150"
                        label="小B名称" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="school_name"
                        min-width="150"
                        show-overflow-tooltip
                        label="学校名称" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="academy_name"
                        min-width="150"
                        show-overflow-tooltip
                        label="学院名称" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="class_name"
                        min-width="150"
                        show-overflow-tooltip
                        label="班级名称" />

                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="phone"
                        min-width="110"
                        label="手机号" />
                    <el-table-column
                        prop="submit_config"
                        min-width="100"
                        label="反馈要求">
                        <template slot-scope="scope">
                            <div style="font-size: 0;white-space: nowrap;">
                                <span
                                    class="submit-config-item"
                                    v-if="scope.row.text_count">
                                    <span class="num">{{ scope.row.text_count }}</span>
                                    <i class="iconfont icon-chunwenbentag" />
                                </span>
                                <span
                                    class="submit-config-item"
                                    v-if="scope.row.image_count">
                                    <span class="num">{{ scope.row.image_count }}</span>
                                    <i class="iconfont icon-tupian" />
                                </span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        min-width="100"
                        label="任务状态">
                        <template slot-scope="scope">
                            <div class="task-review-status">
                                <template v-if="scope.row.status == -1">
                                    <span class="status deny">审核未通过</span>
                                </template>
                                <template v-if="scope.row.status == 0">
                                    <span class="status wait-submit">待提交</span>
                                </template>
                                <template v-if="scope.row.status == 1">
                                    <span class="status wait-audit">待审核</span>
                                </template>
                                <template v-if="scope.row.status == 2">
                                    <span class="status completed">审核通过</span>
                                </template>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="submit_time"
                        min-width="140"
                        label="提交时间">
                        <template slot-scope="scope">
                            <template v-if="scope.row.submit_time">{{ scope.row.submit_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</template>
                            <template v-else>--</template>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                        prop="time"
                        min-width="272"
                        label="任务时间">
                        <template slot-scope="scope">
                            {{ scope.row.start_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}至
                            {{ scope.row.end_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column> -->
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        width="156">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                :disabled="!authResult.auth_audit || scope.row.status == 0"
                                @click="handleOpenAuditDialog(scope.$index, scope.row)">
                                <template v-if="scope.row.status == 2 || scope.row.status == -1">查看</template>
                                <template v-else>审核</template>
                            </el-button>
                            <el-button
                                type="text"
                                :disabled="!authResult.auth_audit || scope.row.status !=1"
                                @click="handlePass(scope.row)">通过</el-button>
                            <el-button
                                type="text"
                                class="btn-delete"
                                :disabled="!authResult.auth_audit || scope.row.status !=1"
                                @click="handleDeny(scope.row)">不通过</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
        <el-dialog
            :title="auditTargetData.title"
            :visible.sync="dialogVisible"
            custom-class="dialog-task-aduit"
            @close="handleDialogClose">
            <div class="dialog-content-wrapper">
                <div
                    v-if="auditTargetData.submit_config && auditTargetData.submit_config.submit_images_help.length > 0"
                    class="pics-wrapper">
                    <div>
                        <div
                            class="active-pic"
                            :style="{ 'background-image': `url(${auditTargetData.pics[auditPicActive].url})` }"
                            @click="dialogPicPreviewVisible = true" />
                        <p style="margin-top: 15px;">{{ auditTargetData.pics[auditPicActive].desc }}</p>
                    </div>
                    <div class="pics">
                        <span
                            v-for="(item, index) in auditTargetData.pics"
                            :key="index"
                            :class="{ 'active': index == auditPicActive}"
                            @click="auditPicActive = index">
                            <img :src="item.url">
                        </span>
                    </div>
                </div>
                <div class="text-content-wrapper">
                    <el-form
                        label-width="100px"
                        label-position="left">
                        <el-form-item label="当页进度：">
                            <el-progress
                                :percentage="(auditTargetIndex + 1)*100/tableData.length"
                                :show-text="false"
                                color="#1890FF" />
                            <span class="progress-hint">审核通过{{ auditTargetIndex + 1 }}/{{ tableData.length }}</span>
                        </el-form-item>
                        <el-form-item
                            v-if="auditTargetData.submit_config && auditTargetData.submit_config.submit_texts_help.length > 0"
                            label="文本反馈：">
                            <el-collapse
                                class="task-aduit-text-collapse text-feedback-wrap"
                                v-model="auditCollapseActive">
                                <el-collapse-item
                                    v-for="(item, index) in auditTargetData.submit_config.submit_texts_help"
                                    :key="index"
                                    :title="item.desc"
                                    :name="index">
                                    <div>{{ auditTargetData.submit_result.texts[index] }}</div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-form-item>
                        <el-form-item
                            v-if="auditTargetData.statistic_config && auditTargetData.statistic_config.length > 0"
                            label="反馈统计：">
                            <div class="small-form">
                                <el-form-item
                                    v-for="(item, index) in auditTargetData.statistic_config"
                                    :key="index"
                                    class="small-form-item"
                                    :label="item.title"
                                    label-width="80px">
                                    <el-input
                                        v-model="auditTargetData.statistic.values[index]"
                                        placeholder="请输入"
                                        :readonly="auditTargetData.status != 1"
                                        size="small" />
                                </el-form-item>
                            </div>
                        </el-form-item>
                        <el-form-item label="不通过理由：">
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                :readonly="auditTargetData.status != 1"
                                v-model="auditTargetData.verify_fail_reason" />
                        </el-form-item>
                    </el-form>
                    <div class="form-operation-wrapper">
                        <div
                            v-if="auditTargetData.status == 1"
                            class="submit-btn-wrapper">
                            <el-button
                                type="primary"
                                size="small"
                                :disabled="auditTargetData.status != 1"
                                @click="handleDialogAudit(2)">通过</el-button>
                            <el-button
                                size="small"
                                :disabled="auditTargetData.status != 1"
                                @click="handleDialogAudit(-1)">不通过</el-button>
                        </div>
                        <p
                            v-else-if="auditTargetData.status == 2"
                            style="color: #1890ff">已通过</p>
                        <p
                            v-else-if="auditTargetData.status == -1"
                            style="color: #fd4d23">未通过</p>
                        <div class="index-btn-wrapper">
                            <el-button
                                class="index-btn prev"
                                :disabled="auditTargetIndex == 0"
                                @click="handleChangeAuditIndex(true)"
                                type="text">
                                <el-icon name="arrow-left" />
                                上一条反馈
                            </el-button>
                            <el-button
                                class="index-btn next"
                                @click="handleChangeAuditIndex(false)"
                                :disabled="auditTargetIndex + 1 == tableData.length"
                                type="text">
                                下一条反馈
                                <el-icon name="arrow-right" />
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <el-dialog
            fullscreen
            :visible.sync="dialogPicPreviewVisible"
            custom-class="dialog-pic-preview-wrapper"
            @close="isShowOriginPic = false">
            <div
                v-if="auditTargetData.submit_config && auditTargetData.submit_config.submit_images_help.length > 0"
                class="pic-preview-wrapper"
                :style="{ 'background-image': `url(${auditTargetData.pics[auditPicActive].url})` }"
                @click.self="isShowOriginPic = true">
                <span
                    class="close-btn"
                    @click="dialogPicPreviewVisible = false" />
                <span
                    class="next-btn"
                    v-show="auditTargetData.pics.length > auditPicActive + 1"
                    @click="auditPicActive++" />
                <span
                    class="prev-btn"
                    v-show="auditPicActive != 0"
                    @click="auditPicActive--" />
                <div
                    v-if="isShowOriginPic"
                    class="origin-pic-wrapper"
                    @click="isShowOriginPic = false">
                    <img
                        :src="auditTargetData.pics[auditPicActive].url"
                        alt="">
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cityList: [],
            authResult: {},
            routeName: '',
            tasks: [],
            statusList: [
                {
                    value: '-99',
                    label: '不限'
                },
                {
                    value: '-1',
                    label: '审核未通过'
                },
                {
                    value: '0',
                    label: '待提交'
                },
                {
                    value: '1',
                    label: '待审核'
                },
                {
                    value: '2',
                    label: '审核通过'
                }
            ],
            statData: {},
            tableData: [],
            filterData: {
                user_no: '',
                phone: '',
                task_no: '',
                status: '',
                parent_user_no: '',
                city_id: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            dialogVisible: false,
            auditTargetIndex: 0,
            auditTargetData: {},
            auditPicActive: 0,
            auditCollapseActive: [0, 1, 2, 3, 4, 5, 6, 7, 8,9, 10, 11, 12, 13, 14, 15],
            onlyOneTask: false,
            dialogPicPreviewVisible: false,
            isShowOriginPic: false,
            showTotalDataFlag: true
        };
    },
    computed: {
        exportLink() {
            let { user_no, parent_user_no, phone, task_no, status } = this.filterData;
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');

            return `${base}/task/task_submit%5Cexport?task_no=${task_no}&phone=${phone}&user_no=${user_no}&parent_user_no=${parent_user_no}&status=${status}&__ticket=${ticket}`;
        }
    },
    watch: {
        $route() {
            this.init();
        }
    },
    created() {
        this.init();
    },
    methods: {
        /**
         * 初始化
         */
        init() {
            this.authResult = this.$route.meta.authResult;
            this.routeName = this.$route.name;
            let { user_no, parent_user_no, phone, task_no, status, now_page, one_task } = this.$route.query;

            this.filterData.user_no = user_no || '';
            this.filterData.parent_user_no = parent_user_no || '';
            this.filterData.phone = phone || '';
            this.filterData.task_no = task_no || '';
            this.filterData.status = status || '';
            this.filterData.city_id = this.$route.query.city_id * 1 || '';
            this.onlyOneTask = one_task > 0 ? 1 : 0;
            this.page.now_page = now_page || 1;

            if (this.routeName == 'TaskReviewList') {
                this.$store.commit('SET_HEADER', [
                    {
                        title: "任务反馈系统",
                    },
                    {
                        title: '任务管理'
                    },
                    {
                        title: "任务反馈列表"
                    }
                ]);
            } else if (this.routeName == 'TaskReviewListForAgent') {
                this.$store.commit('SET_HEADER', [
                    {
                        title: "任务反馈系统",
                    },
                    {
                        title: '任务管理'
                    },
                    {
                        title: "代理统计列表"
                    },
                    {
                        title: '代理执行详情'
                    }
                ]);
            }
            this.getCityList(()=>{
            });
            this.getTasks();
            this.getTableData();
        },

        /**
         * 获取任务名称列表
         */
        getTasks() {
            this.$post('/task/task%5Csuggest', {
                query: ''
            }, resp => {
                if (resp.code == 1) {
                    this.tasks = resp.data.list;
                }
            });
        },

        /**
         * 获取表格数据
         */
        getTableData(page) {
            let { user_no, parent_user_no, phone, task_no, status, city_id } = this.filterData;

            this.$router.replace({
                name: this.$route.name,
                query: {
                    task_no,
                    user_no,
                    parent_user_no,
                    phone,
                    status,
                    now_page: page || this.page.now_page,
                    one_task: this.onlyOneTask,
                    city_id: this.filterData.city_id
                }
            });
            this.$post('/task/task_submit%5Clist', {
                page_id: page || this.page.now_page,
                user_no,
                parent_user_no,
                phone,
                task_no,
                status,
                city_id
            }, resp => {
                if (resp.code == 1) {
                    this.statData = resp.data.stat;
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 获取反馈详情
         */
        getAuditDetail(task_no, user_no, callback) {
            this.$post('/task/task_submit%5Cget', {
                task_no,
                user_no
            }, resp => {
                if (resp.code == 1 && callback) {
                    callback(resp.data);
                }
            });
        },

        /**
         * 导出反馈素材
         */
        handleExportMedia() {
            let taskTitle;

            this.tasks.forEach(item => {
                if (this.filterData.task_no == item.task_no) {
                    taskTitle = item.title;
                }
            });
            this.$prompt('请输入邮箱', `您将发送#${taskTitle}#的反馈素材`, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                inputErrorMessage: '邮箱格式不正确'
            }).then(({ value }) => {
                let { user_no, phone, task_no, status } = this.filterData;

                this.$post('/task/task_submit%5Cemail', {
                    task_no,
                    email: value
                }, resp => {
                    if (resp.code == 1) {
                        this.$message({
                            type: 'success',
                            message: resp.msg || '请求发送成功'
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.msg || '请求发送失败'
                        });
                    }
                });
            }).catch(() => {});
        },

        /**
         * 清空筛选数据
         */
        handleResetFilter() {
            for (let i in this.filterData) {
                this.filterData[i] = '';
            }

            this.getTableData();
        },

        /**
         * 选择任务改变的时候清空统计数据
         */
        handleSelectedTaskChanged() {
            for (let i in this.statData) {
                this.statData[i] = undefined;
            }
            this.getTableData();
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },

        /**
         * 打开审核弹窗
         */
        handleOpenAuditDialog(index, data) {
            this.auditTargetIndex = index;
            this.getAuditDetail(data.task_no, data.user_no, resp => {
                let arr = [];
                let config = resp.submit_config.submit_images_help;
                let result = resp.submit_result.images;

                if (resp.submit_config.submit_images_help.length > 0) {
                    for (let i in config) {
                        for (let j in result[i]) {
                            arr.push({
                                desc: config[i].desc,
                                url: result[i][j]
                            });
                        }
                    }
                }
                this.auditTargetData = Object.assign({
                    pics: arr
                }, resp);
            });

            this.dialogVisible = true;
        },

        /**
         * 通过审核提示-列表用
         */
        handlePass(data) {
            this.$confirm('是否确定通过审核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.submitAudit(data.task_no, data.user_no, true);
            }).catch(() => {});
        },

        /**
         * 拒绝审核提示-列表用
         */
        handleDeny(data) {
            this.$prompt('请输入不通过原因', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValidator: this.validateDenyInput
            }).then(({ value }) => {
                this.submitAudit(data.task_no, data.user_no, false, value);
            }).catch(() => {});
        },

        /**
         * 提交审核结果-列表用
         */
        submitAudit(task_no, user_no, status, reason = '') {
            this.$post('/task/task_submit%5Caudit', {
                task_no,
                user_no,
                status: status ? 2 : -1,
                reason
            }, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '审核操作成功'
                    });
                    this.getTableData();
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '审核操作失败'
                    });
                }
            });
        },

        /**
         * 拒绝弹窗非空验证
         */
        validateDenyInput(value) {
            if (value) {
                return true;
            } else {
                return '请输入不通过原因';
            }
        },

        /**
         * 审核时切换到上一条/下一条
         */
        handleChangeAuditIndex(value) {
            let index = this.handleSearchAudit(value ? 'reduce' : 'add');

            if (index < 0) {
                this.$message({
                    type: 'warning',
                    message: '没有上一条了'
                });
                return;
            } else if (index >= this.tableData.length) {
                this.$message({
                    type: 'warning',
                    message: '没有下一条了'
                });
                return;
            }

            this.getAuditDetail(this.tableData[index].task_no, this.tableData[index].user_no, resp => {
                let arr = [];
                let config = resp.submit_config.submit_images_help;
                let result = resp.submit_result.images;

                if (resp.submit_config.submit_images_help.length > 0) {
                    for (let i in config) {
                        for (let j in result[i]) {
                            arr.push({
                                desc: config[i].desc,
                                url: result[i][j]
                            });
                        }
                    }
                }
                this.auditTargetData = Object.assign({
                    pics: arr
                }, resp);
                this.auditPicActive = 0;
                this.auditCollapseActive = [0, 1, 2, 3, 4, 5, 6, 7, 8,9, 10, 11, 12, 13, 14, 15];
            });
        },

        /**
         * 寻找上/下一条处于待审核的反馈
         */
        handleSearchAudit(method) {
            if (method == 'add') {
                this.auditTargetIndex++;
            } else {
                this.auditTargetIndex--;
            }

            if (this.auditTargetIndex < 0) {
                this.auditTargetIndex = 0;
                return -1;
            } else if (this.auditTargetIndex >= this.tableData.length) {
                this.auditTargetIndex = this.tableData.length - 1;
                return this.tableData.length;
            }

            if (this.tableData[this.auditTargetIndex].status != 0) {
                return this.auditTargetIndex;
            } else {
                return this.handleSearchAudit(method);
            }
        },

        /**
         * 提交审核结果 - 弹窗用
         */
        handleDialogAudit(val) {
            this.$post('/task/task_submit%5Caudit', {
                task_no: this.auditTargetData.task_no,
                user_no: this.auditTargetData.user_no,
                status: val,
                statistic: JSON.stringify({
                    ipt: this.auditTargetData.statistic.values
                }),
                reason: this.auditTargetData.verify_fail_reason
            }, resp => {
                if (resp.code == 1) {
                    this.auditTargetData.status = val;
                    this.tableData[this.auditTargetIndex].status = val;
                    this.handleChangeAuditIndex(false);
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '审核失败，请刷新页面重试'
                    });
                }
            });
        },

        /**
         * 关闭弹窗处理
         */
        handleDialogClose() {
            this.getTableData();
            this.auditPicActive = 0;
            this.auditCollapseActive = [0, 1, 2, 3, 4, 5, 6, 7, 8,9, 10, 11, 12, 13, 14, 15];
        },

        /**
         * 更改城市
         */
        fnCityChange() {
            this.getTableData(1);
        },

        /**
         * 获取城市列表
         */
        getCityList(callback) {
            this.$post('/task/base_city%5Cget_simple_list', {
            }, resp => {
                if (resp.code == 1) {
                    this.cityList = resp.data.list;
                    this.cityList.unshift({
                        city_id: '',
                        name: '全部'
                    });
                    callback();
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.stat-wrapper {
    margin-bottom: 15px;
    .desc {
        color: #262626;
        background: #fff;
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        // border-bottom: 1px solid #c0c4cc;
        padding-right: 30px;
        .end-time{
            position: relative;
            display: inline-block;
            padding-right: 15px;
            &:after{
                position: absolute;
                content: '';
                width:1px;
                height:20px;
                background:rgba(240,242,245,1);
                right: 0px;
                top: 50%;
                margin-top: -10px;
            }
        }
        .total-switch{
            position: relative;
            display: inline-block;
            font-size:14px;
            font-weight:400;
            color:rgba(38,38,38,1);
            line-height:20px;
            padding-left: 15px;
            cursor: pointer;
        }
    }
    .alert-search-task {
        background-color: #fdf6ec;
        color: #e6a23c;
        border: 1px solid #FAECD8;
        border-radius: 0;
    }
    .stat {
        display: flex;
        justify-content: space-between;
    }
    .stat-item {
        flex: 1;
        background-color: #fff;
        box-shadow:0px 2px 4px 0px rgba(0,0,0,0.04);
        border: 1px solid #F0F2F5;
        height: 44px;
        line-height: 44px;
        &:nth-of-type(n - 1){
            border-left: none;
        }
        &:last-child{
            border-right: none;
        }
        .title {
            position: relative;
            line-height: 22px;
            color: rgba(0, 0, 0, .45);
            display: inline-block;
            padding-left: 28px;
            &::before {
                position: absolute;
                content: '';
                width: 2px;
                height: 15px;
                left: 20px;
                top: calc(50% - 1px);
                transform: translate(0, -50%);
            }

            &.blue {
                &:before {
                    background-color: #007AFF;
                }
            }

            &.green {
                &:before {
                    background-color: #00C800;
                }
            }

            &.orange {
                &:before {
                    background-color: #F5A623;
                }
            }

            &.red {
                &:before {
                    background-color: #FF0019;
                }
            }
        }
        .num {
            display: inline-block;
            &.empty {
                font-size: 12px;
                color: rgba(0, 0, 0, .45);
            }
        }
        .el-icon-question{
            color: #ccc;
        }
    }
}
.search-wrapper {
    padding: 15px 15px 0;
    background-color: #fff;
}
.filter-item {
    margin-bottom: 15px;
    .el-form-item {
        margin-bottom: 0;
    }
    .el-autocomplete {
        width: 100%;
    }
}
.search-btn-wrapper {
    margin-bottom: 15px;
}
.table-wrapper {
    flex: 1;
    overflow: hidden;
    background-color: #fff;
    .submit-config-item {
        display: inline-block;
        position: relative;
        padding-right: 10px;
        font-size: 14px;

        & + .submit-config-item {
            padding-left: 10px;
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                width: 1px;
                height: 14px;
                transform: translate(0, -50%);
                background-color: #d8d8d8;
            }
        }

        .num {
            vertical-align: middle;
        }
        .iconfont {
            font-size: 16px;
            color: #b9b9b9;
            vertical-align: middle;
        }

        .icon-tupian {
            font-size: 20px;
        }
    }
    .task-review-status {
        .status {
            position: relative;
            display: inline-block;
            padding-left: 9px;
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(0, -50%);
                width: 3px;
                height: 3px;
                border-radius: 50%;
            }
            &.wait-submit,
            &.wait-audit {
                &::before {
                    background-color: #F5A623;
                }
            }
            &.deny {
                &::before {
                    background-color: #FF0019;
                }
            }
            &.completed {
                &::before {
                    background-color: #00C800;
                }
            }
        }
    }
    .el-button {
        padding: 0;
    }

    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.dialog-content-wrapper {
    display: flex;
    .text-content-wrapper {
        width: 570px;
    }
}
.el-form {
    .el-progress {
        display: inline-block;
        width: 150px;
        margin-right: 15px;
        vertical-align: middle;
    }
    .progress-hint {
        color: #8c8c8c;
    }
}
.form-operation-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 56px;

    .index-btn {
        color: #000;
        cursor: pointer;
        & + .index-btn {
            margin-left: 15px;
        }
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}
.pics-wrapper {
    display: flex;
    margin-right: 68px;
    .active-pic {
        width: 300px;
        height: 532px;
        background-position: 50% 50%;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .pics {
        height: 532px;
        margin-left: 10px;
        padding-right: 10px;
        overflow: auto;
        span {
            display: block;
            width: 100px;
            height: 100px;
            font-size: 0;
            border: 1px solid transparent;

            &.active {
                border-color: #20a0ff;
            }

            & + span {
                margin-top: 10px;
            }
        }
        img {
            width: 98px;
            height: 98px;
        }
    }
}
</style>
<style lang="less">
.task-review-list-container {
    .el-dialog__wrapper {
        text-align: center;
    }
    .dialog-task-aduit {
        display: inline-block;
        width: auto!important;
        max-width: 1200px;
    }
    .el-dialog__body {
        text-align: left;
    }
    .small-form {
        font-size: 0;
    }
    .small-form-item {
        display: inline-block;
        width: 47%;
        font-size: 14px;
        margin-rigth: 10%;
        &:nth-child(even) {
            margin-left: 6%;
        }
        .el-form-item__label {
            padding-right: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    tbody {
        .cell {
            display: flex;
            align-items: center;
            height: 26px;
        }
    }
}

.task-aduit-text-collapse {
    max-height: 229px;
    overflow: auto;
    .el-collapse-item{
        border: 1px solid #EDEDED;
        border-bottom: none;
        &:last-child{
            border-bottom: 1px solid #EDEDED;
        }
    }
    .el-collapse-item__header {
        line-height: 32px;
        height:32px;
        background:rgba(0,0,0,0.02);
        border-bottom: none!important;
        padding-left: 10px;
    }
    .el-collapse-item__arrow {
        line-height: 35px;
        display: none;
    }
    .el-collapse-item__content {
        padding: 10px;
        color: #000000;
    }
    .el-collapse-item__wrap{
        border-bottom: none;
    }
    &.el-collapse{
        border-top: none;
    }
}
.dialog-pic-preview-wrapper {
    position: relative;
    .el-dialog__header {
        display: none;
    }
    .el-dialog__body {
        padding: 0;
    }
    .pic-preview-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .6);
        background-position: 50% 50%;
        background-size: contain;
        background-repeat: no-repeat;
        cursor: zoom-in;
    }
    .close-btn {
        position: absolute;
        top: 50px;
        right: 50px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: url(http://cdn.wxhand.com/admin/images/market/btn-close.png) no-repeat center center;
        background-size: contain;
        z-index: 1;
        cursor: pointer;
    }
    .prev-btn {
        position: absolute;
        top: 50%;
        left: 50px;
        transform: translate(0, -50%);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: url(http://cdn.wxhand.com/admin/images/market/btn-prev.png) no-repeat center center;
        background-size: contain;
        z-index: 1;
        cursor: pointer;
    }
    .next-btn {
        position: absolute;
        top: 50%;
        right: 50px;
        transform: translate(0, -50%);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: url(http://cdn.wxhand.com/admin/images/market/btn-next.png) no-repeat center center;
        background-size: contain;
        z-index: 1;
        cursor: pointer;
    }
    .origin-pic-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: auto;
        background-color: #000;
        z-index: 2;
        cursor: zoom-out;
    }
}
</style>
